{% extends 'base.html' %}
{% load static %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
    <h3 class="home-content">欢迎访问我的网站</h3>
    <!--<p>{{ read_nums }}</p>-->
  <!-- 图表容器 DOM -->
<body>
    <div id="container"></div>
    <!-- 今天24小时内的热门博客 -->
    <div class="hot_data">
             <h3>今天热门博客</h3>
         <ul>
            {% for hot_data in today_hot_data %}
                <li><a href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title }}
                    </a>({{ hot_data.read_num }})</li>
            {% empty %}
                <li>今天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>

     <div class="hot_data">
              <h3>昨天热门博客</h3>
        <ul>
            {% for hot_data in yesterday_hot_data %}
                <li><a href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title }}
                    </a>({{ hot_data.read_num }})</li>
            {% empty %}
                <li>昨天暂时没有热门博客</li>
            {% endfor %}
        </ul>
     </div>

     <div class="hot_data">
             <h3>7天热门博客</h3>
        <ul>
            {% for hot_blog in hot_blogs_for_7_days %}
                <li><a href="{% url 'blog_detail' hot_blog.id %}">{{ hot_blog.title }}
                    </a>({{ hot_blog.read_num_sum }})</li>
            {% empty %}
                <li>7天暂时没有热门博客</li>
            {% endfor %}
        </ul>
     </div>

    <div class="hot_data">
           <h3>30天热门博客</h3>
        <ul>
            {% for hot_blog in hot_blogs_for_30_days %}
                <li><a href="{% url 'blog_detail' hot_blog.id %}">{{ hot_blog.title }}
                    </a>({{ hot_blog.read_num_sum }})</li>
            {% empty %}
                <li>30天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
     <script>
        // 图表配置
        var options = {
            chart: { type: 'line' },                         //指定图表的类型，默认是折线图（line）
            title: { text: null },                 // 标题
            xAxis: {
                categories: {{ dates|safe }},  // x 轴分类
                tickmarkPlacement: 'on',
                    title: { text: '前七日阅读量变化' },
            },
            yAxis: {
                title: { text: null },               // y 轴标题
                labels:{ enabled: false },
                gridLineDashStyle: 'Dash',
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data: {{ read_nums }}           // 数据
            }],
            plotOptions:{                       //数据标签
                line:{
                      dataLabels:{
                        enabled: true
                }
                }
            },
            legend:{ enabled: false },               //去掉数据列
            credits:{ enabled: false },              //去掉版权信息
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
{% endblock %}